﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>欢迎来到"看看"注册界面</title>
<meta charset="UTF-8">
<meta name="keywords" content="注册表单验证">

<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/jNotify.jquery.js" type="text/javascript"></script>
<link rel="shortcut icon" href="img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/jNotify.jquery.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/public.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/register.css">
<link rel="shortcut icon" href="favicon.ico" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
<script src="js/json.parse.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
	$(".btn").click(function(){
				var agreenMent=$("#agreement").attr("data");
				
				//alert(agreenMent);0
				var userName= $("#username").val();
				var userPass= $("#password1").val();
				var userPass2=$("#password2").val();
				var userEmail=$("#mail").val();
				var vercode =$("#varcode").val();
				
				userPass=$.trim(userPass);
				userPass2=$.trim(userPass2);
				
				$(".input_div1 span,.input_div2 span,.input_div3 span,.input_div4 span,.input_div6 span,.input_div5 span").html("");
				$(".btn").val('注册中...').attr('disabled','disabled');
				
				if(!isRegisterUserName(userName)){
					$(".input_div1 span").html('<img src="img/text_error.png"><font color=red>账户名格式不正确!</font>');
					$("#username").focus();
					$(".btn").val('注册').removeAttr('disabled');
					return false;
				}else if(!isEmail(userEmail)){
					$(".input_div2 span").html('<img src="img/text_error.png"><font color=red>邮箱格式不正确!</font>');
					$("#mail").focus();
					$(".btn").val('注册').removeAttr('disabled');
					return false;
				}else if(userPass.length <8){
					$(".input_div3 span").html('<img src="img/text_error.png"><font color=red>密码格式不正确!</font>');
					$("#password1").focus();
					$(".btn").val('注册').removeAttr('disabled');
					return false;
				}else if(userPass != userPass2){
					$(".input_div4 span").html('<img src="img/text_error.png"><font color=red>两次输入的密码不一致!</font>');
					$("#password2").focus();
					$(".btn").val('注册').removeAttr('disabled');
					return false;
				} else if(vercode ==''){
					$(".input_div5 span").html('<img src="img/text_error.png"><font color=red>输入图片验证码</font>');

					$("#varcode").focus();
					$(".btn").val('注册').removeAttr('disabled');
					return false;
				} else if(agreenMent != '1'){
					//$(".agreenment-tips").html('请先同意用户条款!').fadeIn();
					$(".input_div6 span").html('<img src="img/text_error.png"><font color=red>请先同意用户条款!</font>');
					$(".btn").val('注册').removeAttr('disabled');
					return false;
				}else{	
					var url="register.do";
					var args={"username":userName,"password":userPass2,"email":userEmail,"code":vercode,"time":new Date()};
					$.post(url,args,function(data){
						//alert(data);
						
					if(data=="success"){
						$("#one_u").hide();
						$("#two_u").show();
							
						}else if(data=="error"){
							
							$(".input_div5 span").html('<img src="img/text_error.png"><font color=red>验证码错误！</font>');
							$(".btn").val('注册').removeAttr('disabled');
						}else{
							alert("服务器错误！");
						}
						



					});
				}
				return false;
		});
	
	$(".change").click(function(){
		$("#imgcode").attr('src','vercode');
	})
	
	$('.check2').click(function(){
		var rel = $('#agreement').attr("data");
		//alert(rel);
		if(rel =='1'){
			$('#agreement').attr("data","0");
		}else{
			$('#agreement').attr("data","1");
		}
		$('.check2').toggleClass("check1");
	});
	
});

function isRegisterUserName(s){  
	var patrn=/^[a-zA-Z0-9]{1}([a-zA-Z0-9]|[._]){5,19}$/;  
	if (!patrn.exec(s)) return false
	return true
}

function isEmail(email){
	   var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
	   if(!myreg.test(email)) return false;
		return true; 
 }

</script>



<style>
.input_div span{ background:#FFF;}
.success_u{width:220px; height:110px; border:1px solid #e1e1e1;margin-left:40%;margin-top:10%; background:url(img/success.png) center 30px no-repeat;text-align:right;}
.success_u p {text-align:center;}
</style>
<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"  type="text/javascript"></script>
<script>DD_belatedPNG.fix('.png_bg');</script>
<![endif]-->
</head>
<body>
	<div id="header">
		<div class="header">
			<img src="img/logo.png">
		
			<a class="png_bg" href="index.jsp">返回主页</a>
		</div>
	</div>
	
	<div class="register_content" id="one_u">
	
		<ul class="step_ul step1 clear">
			<li class="li1">01、填写资料</li>
			<li class="li2">02、完成注册</li>
		</ul>
		
		 <form name="registerForm" id='registerForm' style="padding:60px 40px 40px 40px;font-family:Microsoft Yahei">
			<div class="div_form clear ">
				<label>账户名：</label>
				<div class="input_div input_div1">
					<input id="username" name="username" type="text" placeholder="格式6-24位数字或字母" maxlength="24">
					<span></span>
				</div>
			</div>
			<div class="div_form clear ">
				<label>邮箱帐号：</label>
				<div class="input_div input_div2" >
					<input id="mail" name="useremail"  type="text" placeholder="请填写正确的邮箱，以便接收账号激活邮件" maxlength="64">
					<span></span>
				</div>
			</div>
			<div class="div_form clear ">
				<label>输入密码：</label>
				<div class="input_div input_div3">
					<input id="password1" name="userpass" type="password" placeholder="最少 8 个字符，区分大小写" maxlength="32">
					<span></span>
				</div>
			</div>
			<div class="div_form clear ">
				<label>确认密码：</label>
				<div class="input_div input_div4">
					<input id="password2" name="userpass2" type="password" placeholder="确认输入的密码" maxlength="32">
					<span></span>
				</div>
			</div>
			<div class="div_form clear ">
				<label>验证码：</label>
				<div class="input_div input_div5">
					<input id="varcode" name="vercode" placeholder="请输入验证码" type="text">
					<img src="getCode" onclick="this.src='getCode?random='+Math.random()*10;" style="border:1px solid #000;">
					<span></span>
				</div>
			</div>
			<div class="div_form clear ">
				<label></label>
				<div class="input_div check2 input_div6" data="0" id="agreement">
					我已阅读并接受《看看网用户服务协议》
                    <span></span>
				</div>
			</div>
            
			<div class="div_form clear ">
				<label></label>
				<div class="input_div">
					<input id="btn" class="btn" type="button" value="注册" />
            	</div>
			</div>
			
		</form>
		
		<div class="reg_login">
			<p>已有帐号？</p>
			<a class="btn2" href="toLogin.do">登录</a>
		</div>
		
		<div class="segment">
			<h2 class="title">— — 嗨！你可以选择下方合作网站帐号直接登录看看，一分钟完成注册 — —</h2>
			<div class="social auths">
				<a href="#" title="使用微博登录" class="icon small auth weibo"></a>
				<a href="#" title="使用QQ登录" class="icon small auth qq"></a>
				<a href="#" title="使用微信登录" class="icon small auth wechat"></a>
			</div>
			</div>
		<div class="bg"></div>
		
	</div>
	
	
	<div class="register_content" id="two_u"  style="display:none">	      
		<ul class="step_ul step2 clear">
			<li class="li1">01、填写资料</li>
			<li class="li2">02、完成注册</li>
		</ul>

   		<div class="success_u" >		
		    <p>恭喜你注册成功&nbsp;<a href="#" id="toPage">返回继续浏览</a></p>		    
		</div>	
	</div>
	
	<!-- footer start -->

<script type="text/javascript">
    var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F5d12e2b4eed3b554ae941c0ac43c330a' type='text/javascript'%3E%3C/script%3E"));
</script>
<!-- footer end -->


<script type="text/javascript">
    $(function(){
    	$("#username").change(function(){
    	    var val = $(this).val();
    		val = $.trim(val);
    		//alert(val);
    		
			if(!isRegisterUserName(val)){
				$(".input_div1 span").html('<img src="img/text_error.png"><font color=red>账户名格式不正确!</font>');
				$("#username").focus();
				return false;
			}
    		
    		if(val != ""){
    			var url = "validateName.do";
    			var args = {"username":val, "time":new Date()};
    			$.post(url, args, function(data){
    				//alert(data);
    				
    				//表示可用
    				if(data == "1"){
    					$(".input_div1 span").html('<img src="img/success2.png"><font color=green></font>');
    				}
    				//不可用
    				else if(data == "0"){
    					$(".input_div1 span").html('<img src="img/text_error.png"><font color=red>用户名已存在</font>');						
    				}
    				//服务器错误
    				else{
    					alert("服务器错误!"+data);
    				}
    			});
    		}else{
    			alert("不能为空");

    		}
    		
    	});
    	
    	
    	$("#mail").change(function(){
    	    var val = $(this).val();
    		val = $.trim(val);
    		//alert(val);
    		
    		 if(!isEmail(val)){
					$(".input_div2 span").html('<img src="img/text_error.png"><font color=red>邮箱格式不正确!</font>');
					$("#mail").focus();
					return false;
				}
    		if(val != ""){
    			var url = "validateName.do";
    			var args = {"useremail":val, "time":new Date()};
    			$.post(url, args, function(data){
    				//alert(data);
    				
    				//表示可用
    				if(data == "1"){
    					$(".input_div2 span").html('<img src="img/success2.png"><font color=green></font>');
    				}
    				//不可用
    				else if(data == "0"){
    					$(".input_div2 span").html('<img src="img/text_error.png"><font color=red>邮箱已存在</font>');					
    				}
    				//服务器错误
    				else{
    					alert("服务器错误!"+data);
    				}
    			});
    		}else{
    			alert("不能为空");

    		}
    	});
    	
    	
    	$("#password2").change(function(){
    		var password1=$('#password1').val();
    		var password2=$('#password2').val();
    		
    		if(password1 != password2){
				$(".input_div4 span").html('<img src="img/text_error.png"><font color=red>两次输入的密码不一致!</font>');
				$("#password2").focus();
				return false;
    		}else if(password1 == password2){
    			$(".input_div4 span").html('<img src="img/success2.png"><font color=green></font>');
    			return true;
    		}
    		
    	});
    	
    	$("#toPage").click(function(){

    		var queryUrl=window.location.search;
    		var end=queryUrl.length;
    		queryUrl=queryUrl.substring(6,end);
    		window.location.href=queryUrl+".jsp";
    		return false;
    	});
    	
    	
    })

</script>
</body>
</html>
















